<!--
  @author tanghongjun
  @since 2018/10/19 08:59
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: jscss">
    <title>产品描述</title>
</head>
<body>
<div class="layui-fluid">
    <blockquote class="layui-crumb">
        前台产品>产品管理>
        <a lay-href="/showProduct/list.action">前台产品管理</a>>
        <a th:href="'/showProduct/addEditView.action?productId='+${servProductVO.productId}">[[${servProductVO.name}]]</a>>
        <zmn>产品保障</zmn>
    </blockquote>

    <div class="layui-card">
        <div th:replace="product/show/_tab::tab"></div>

        <div class="layui-card-body">

            <form method="post" action="" class="layui-form" lay-filter="zmn-form">
                <input type="hidden" name="productId" th:value="${servProductVO.productId}"/>
                <input type="hidden" name="productGuaranteeId" th:value="${productGuarantee.productGuaranteeId}"/>

                <div class="layui-card-header" style="margin-top:10px;">
                    <b>保障小图</b>
                </div>
                <div class="layui-split">&nbsp;</div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureOne">
                                <input type="hidden" id="smallPictureOneValue" name="smallPictureOne">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureOneValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureOne')"  class="layui-icon layui-icon-delete btn-del funcClass"></i>
                                <br>
                            </div>
                            <div class="layui-inline">
                                <p><b>></b></p>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureOneDesc==null?'':productGuarantee.smallPictureOneDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureOneDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>


                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureTwo">
                                <input type="hidden" id="smallPictureTwoValue" name="smallPictureTwo">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureTwoValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureTwo')" class="layui-icon layui-icon-delete btn-del"></i>
                            </div>
                            <div class="layui-inline">
                                <p><b>></b></p>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureTwoDesc==null?'':productGuarantee.smallPictureTwoDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureTwoDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureThree">
                                <input type="hidden" id="smallPictureThreeValue" name="smallPictureThree">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureThreeValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureThree')" class="layui-icon layui-icon-delete btn-del"></i>
                            </div>
                            <div class="layui-inline">
                                <p><b>></b></p>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureThreeDesc==null?'':productGuarantee.smallPictureThreeDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureThreeDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureFour">
                                <input type="hidden" id="smallPictureFourValue" name="smallPictureFour">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureFourValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureFour')" class="layui-icon layui-icon-delete btn-del"></i>
                            </div>
                            <div class="layui-inline">
                                <p><b>></b></p>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureFourDesc==null?'':productGuarantee.smallPictureFourDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureFourDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureFive">
                                <input type="hidden" id="smallPictureFiveValue" name="smallPictureFive">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureFiveValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureFive')" class="layui-icon layui-icon-delete btn-del"></i>
                            </div>
                            <div class="layui-inline">
                                <p><b>></b></p>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureFiveDesc==null?'':productGuarantee.smallPictureFiveDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureFiveDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>


                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="smallPictureSix">
                                <input type="hidden" id="smallPictureSixValue" name="smallPictureSix">
                                <i class="layui-icon"></i>
                                <p>点击选择图片上传</p>
                                <p>建议尺寸：120*120</p>
                            </div>
                            <div class="layui-inline">
                                <i onclick="previewImg('smallPictureSixValue')" class="layui-icon layui-icon-search btn-review"></i>
                                <br>
                                <i onclick="deleteImg('smallPictureSix')" class="layui-icon layui-icon-delete btn-del"></i>
                            </div>
                            <div class="layui-split">&nbsp;</div>
                            <div class="layui-inline" style="width: 230px">
                                <div class="layui-input-inline" style="width: 230px">
                                    <input th:value="${productGuarantee.smallPictureSixDesc==null?'':productGuarantee.smallPictureSixDesc}" placeholder="图片描述(30字内)" maxlength="30" style="height: 28px;width: 180px;padding-right:10px;" type="text" name="smallPictureSixDesc" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card-header" style="margin-top:10px;">
                    <b>保障详情页</b>
                </div>
                <div class="layui-split">&nbsp;</div>

                <div class="layui-form-item">
                    <script id="detail" width="1300px" height="500px" name="detail" type="text/plain">
                    </script>
                </div>

                <div style="margin-left: -130px" class="layui-form-item submit">
                    <div class="layui-input-block">
                        <button th:if="${#authPermit.checkPermit('/showProduct/guarantee/addEdit.action')}" class="layui-btn" lay-submit="" lay-filter="zmn-form-submit"
                                >提交
                        </button>
                        <a href="/showProduct/list.ation" class="layui-btn" text="取消">取消</a>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" th:inline="javascript">
    var ue = UE.getEditor('detail', {
        initialFrameHeight:500,
        initialFrameWidth:1300
    });

    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        // 这里很重要，很重要，很重要，要和配置中的imageActionName值一样
        if (action == 'uploadimage') {
            // 这里调用后端我们写的图片上传接口
            return '/ueditor/uploadImageData';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

    let value = [[${productGuarantee.detail}]];
    ue.ready(function () {
        ue.execCommand('insertHtml', value);
    });
</script>

<script type="text/javascript">
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('detail').execCommand('insertHtml', value)
    }

    function getContent() {
        var arr = [];
        arr.push(UE.getEditor('detail').getContent());
        return(arr.join("\n"));
    }
</script>

<script type="text/javascript" th:inline="javascript">
    var json = {
        productGuarantee: [[${productGuarantee}]],
        servProductVO: [[${servProductVO}]]
    };
    layui.config({
        base: "/static/lay/",
        version:20200312
    }).extend({
        index: "lib/index",
        product_guarantee_edit_js: "product/guarantee/zmn.plat.product.guarantee.edit"
    }).use(['index', 'product_guarantee_edit_js']);
</script>